<template>
  <a-card class="body-container">
    <s-list-form 
        :enable-more="false"
         @change="
          $nextTick(() => {
            $calcTableHeight()
          })
        "
       > 
      <template #less>
          <s-form-item
            label="警号"
            size="custom"
            name="operateId"
            :colon="true"
            :display-title="true"
            :options="{'labelWidth':5,'wrapperWidth':15,'offsetWidth':3,'total':6}"
            :rules="[{'max':50,'message':'最长为50位'}]"
          >
            <s-input
              :allow-clear="true"
              v-model="query.operateId"
              />
          </s-form-item>
          <s-form-item
            label="民警姓名"
            size="custom"
            name="policeName"
            :colon="true"
            :display-title="true"
            :options="{'labelWidth':5,'wrapperWidth':15,'offsetWidth':3,'total':6}"
            :rules="[{'max':50,'message':'最长为50位'}]"
          >
            <s-input
              :allow-clear="true"
              v-model="query.policeName"
              />
          </s-form-item>
          <s-form-item
            label="登录时间"
            size="custom"
            name="loginTime"
            :colon="true"
            :display-title="true"
            :options="{'labelWidth':5,'wrapperWidth':15,'offsetWidth':3,'total':6}"
          >
            <s-date-picker
              :allow-clear="true"
              type="date"
              value-format="YYYY-MM-DD"
              v-model="query.loginTime"
              />
          </s-form-item>
          <s-form-item
            label="操作类型"
            size="custom"
            name="operateType"
            :colon="true"
            :display-title="true"
            :options="{'labelWidth':5,'wrapperWidth':15,'offsetWidth':3,'total':5}"
          >
            <s-select
              :allow-clear="true"
              :show-search="true"
              code="OPERATE_TYPE"
              v-model="query.operateType"
              />
          </s-form-item>
          <s-form-item
            label="状态"
            size="custom"
            name="status"
            :colon="true"
            :display-title="true"
            :options="{'labelWidth':5,'wrapperWidth':15,'offsetWidth':3,'total':6}"
          >
            <s-select
              :allow-clear="true"
              :show-search="true"
              code="LOGIN_STATUS"
              v-model="query.status"
              />
          </s-form-item>

      </template>
      <template #more >

	  </template>
    </s-list-form>
      <s-tool-bar>
        <template #left>
          <s-button v-if="authorize.insert" type="primary" icon="plus-outlined" @click="$refs.add.open()">新增</s-button>
          <a-popconfirm v-if="authorize.deleteMulti" title="确认删除所选数据？" ok-text="是" cancel-text="否" @confirm="deleteMulti">
            <s-button type="danger" icon="delete-outlined">删除</s-button>
          </a-popconfirm>
        </template>
      <template #right>
        <s-button type="primary" icon="search-outlined" @click="search">查询</s-button>
        <s-button style="margin-left: 8px" icon="stop-outlined" @click="query={}">重置</s-button>
      </template>
      </s-tool-bar>
      <s-table
        ref="table"
        bordered
		:echos="[]"
        :scroll="{y: tableHeight}"
        :columns="columns"
        url="/modules/operateOpeLog/pageList"
      >
        <template #bodyCell="{ column, record }">
			 <template v-if="column.key === 'action'">
				 <a v-if="authorize.selectOneById" style="margin-right: 8px" @click="$refs.detail.open(record.id)">
					<s-icon type="eye-outlined" />查看
				  </a>
				  <a v-if="authorize.update" style="margin-right: 8px" @click="$refs.update.open(record.id)">
					<s-icon type="edit-outlined" />编辑
				  </a>
				  <a-popconfirm v-if="authorize.delete" title="确认删除此条数据？" ok-text="是" cancel-text="否" @confirm="deleteById(record.id)">
					<a style="margin-right: 8px">
					  <s-icon type="delete-outlined" />删除
					</a>
				  </a-popconfirm>
			 </template>
		 </template>
      </s-table>
    <detail ref="detail" />
    <add ref="add" @success="search" />
    <update ref="update" @success="search" />
  </a-card>
</template>

<script>
const columns = [{'dataIndex':'operateId','title':'序号','width':100,'sorter':false,'ellipsis':true},{'dataIndex':'policeName','title':'民警姓名','width':130,'sorter':false,'ellipsis':true},{'dataIndex':'section','title':'所属部门','width':150,'sorter':false,'ellipsis':false},{'dataIndex':'ip','title':'登录IP','width':150,'sorter':false,'ellipsis':false},{'dataIndex':'loginTime','title':'登录日期','width':200,'sorter':true,'ellipsis':true},{'dataIndex':'operateType','title':'操作类型','width':150,'sorter':false,'ellipsis':true},{'dataIndex':'status','title':'是否异常','width':150,'sorter':false,'ellipsis':false}]
import Detail from './detail/index.vue'
import Add from './add/index.vue'
import Update from './update/index.vue'
export default {
  name: 'QueryList',
  components: { Detail, Add, Update },
  data() {
    return {
      query: { },
      columns: columns
    }
  },
  authorize: '/modules/operateOpeLog/permissionList',
  methods: {
    deleteMulti() {
      const keys = this.$refs.table.getSelectedKeys()
      if (keys.length > 0) {
        this.$loading(true)
        this.$api.DELETE('/modules/operateOpeLog/deleteMulti', { ids: keys.toString() }).then(() => {
          this.$loading(false)
          this.search()
        }).catch(() => {
          this.$loading(false)
        })
      }
    },
	search() {
  const _this = this
      const query = Object.assign({}, this.query)
      
      this.$refs.table.search(query)
    },
    deleteById(id) {
      this.$loading(true)
      this.$api.DELETE('/modules/operateOpeLog/delete', { id: id }).then(() => {
        this.$loading(false)
        this.search()
      }).catch(() => {
        this.$loading(false)
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>